<template>
<!-- 这是积分商品详情兑换页面 -->
  <div id="integralGoods">
    <el-container>
      <el-header><Header></Header></el-header>
      <el-main>
        <div class="main_frame">
          <div class="goodsTop" v-for="item in goodsList.detail" :key="item.id" >
            <div class="goodsImg">
              <!-- 图片 -->
              <img :src="url+item.thumb" alt="">
            </div>
            <div class="productDescription">
              <!-- 文字 -->
              <h3>{{item.title}}</h3>
              <p>仅限：{{item.total}}份 已参与：{{item.joins}}次</p>
              <span>邮费 {{item.dispatch == 0 ? '包邮':item.dispatch}}</span>
              <div class="price"><span class="integral">{{item.credit}}</span> 积分 <span class="money" v-show="item.money > 0">+ ￥{{item.money}}</span></div>
              <div class="exchangeButton"><button @click="exchange">立即兑换</button></div>
            </div>
          </div>
          <div class="goodsBottom">
            <div class="bar">
              <span @click="details" :class="[spanBool == 1 ? 'spanBorder' : '']">商品详情</span>
              <span @click="record" :class="[spanBool == 2 ? 'spanBorder' : '']">参与记录</span>
            </div>
            <!-- 商品详情 -->
            <div v-show="spanBool == 1"  v-for="item in goodsList.detail" :key="item.designer_id" class="details">
              <div v-html="item.goodsdetail">{{item.goodsdetail}}</div>
            </div>
            <!-- 参与记录 -->
            <div v-show="spanBool == 2" class="record">
              <ul>
                <li v-for="data in goodsList.record" :key="data.nickname">
                  <div class="headPortrait">
                    <img :src="data.avatar" alt="">
                  </div>{{data.nickname}}
                  <span>{{data.createtime | formatDate}}</span>
                </li>
              </ul>
              <!-- 分页组件 -->
              <paging :obj='pageObj' @page='child' v-if="pagingBool"></paging>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import {formatDate} from "@/components/formdate.js";
import paging from "@/components/Paging.vue";
export default {
  data () {
    return {
       url: "https://mp.uekea.cn/attachment/",
      // 原数组
      goodsList: [],
      // 参与记录
      historicalData: [
        {id: 0, name: '测试人员1', imgurl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', time: '2020/12/10 11:20'},
        {id: 1, name: '测试人员2', imgurl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', time: '2020/12/08 15:11'},
        {id: 2, name: '测试人员3', imgurl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', time: '2020/11/02 20:21'},
        {id: 3, name: '测试人员4', imgurl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', time: '2020/12/16 05:21'},
        {id: 4, name: '测试人员5', imgurl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', time: '2020/12/30 03:02'},
      ], 
      historicalArr: [],    // 参与记录渲染数组
      // loading: false,

      goodsObj: {},    // 积分商品详情数据
      pagingBool: true,    // 是否显示分页组件
      // 传给分页组件的数据
      pageObj: {
        id: '',
        currentPage: 1, //默认第一页
        pageSize: 10,  //每页显示多少条数据
        totals: 0,   //一共多少条数据
      },
      spanBool: 2,    // 默认商品详情
    }
  },
  components: {
    Header,
    Footer,
    paging
  },
  filters: {
      formatDate(time) {
        time = time * 1000
        let date = new Date(time)
        console.log(new Date(time))
        return formatDate(date, 'yyyy-MM-dd hh:mm')
      }
    },
  methods: {
    // 分页传过来的数据
    child(i) {
      this.renderArray(i);
    },
    // 参与记录
    record() {
      this.spanBool = 2;
    },
    // 商品详情
    details() {
      this.spanBool = 1;
    },
    // 参与记录渲染数组
    // Rendering(index) {
    //   this.pageObj.pageSize
    //   this.historicalArr
    // },
    // 渲染数组
    renderArray(index) {
      let arr = [];
      // 一共多少条数据/每页显示的条数 = 一共有多少页
      // let s = this.pageObj.totals/this.pageObj.pageSize;
      // if(index > s && index ==  s+1) {
      //   index = s;
      // }
      
      let pageIndex = this.pageObj.pageSize * (index-1);  // 每一页开始下标
      let pageNum = this.pageObj.pageSize * index;  // 每一页最后下标
      // 从每一页开始下标循环到小于每一页结束下标
      for (let k = pageIndex; k < pageNum; k++) {
        if(this.historicalData[k] != undefined) {
          arr.push(this.historicalData[k]);
        } else {
          break;
        }
      }
      // 判断原数组的长度是否大于每页显示的数量，大于就显示分页，不大于就不显示
      if(this.historicalData.length > this.pageObj.pageSize) {
        this.pagingBool = true;
      } else {
        this.pagingBool = false;
      }
      // 判断渲染数组长度，是否大于0，有数据才赋值，没有就赋值空，不显示分页
      if(arr.length > 0) {
        this.historicalArr = arr;  // 赋值给渲染数组
      } else {
        this.historicalArr = [];  // 赋值给渲染数组
        this.pagingBool = false;      // 隐藏分页组件
      }
    },
    // 兑换按钮
    exchange () {
      this.$router.push({'path': '/createOrder'});
      this.$store.commit('pointsOrder', this.goodsObj);
    },

  },
  created () {
    var _this = this;
    let id = _this.$route.query.integralGoodsID;
    _this.pageObj.totals = _this.historicalData.length;
    _this.renderArray(1);

    
    
    //请求兑换商品详情
    _this.$get(`integral/detail/${id}`).then(res => {
      if (res.code == 200) {
        res.data.detail[0].goodsdetail = res.data.detail[0].goodsdetail.replace(/images\//g, 'https://mp.uekea.cn/attachment/images/');
        _this.goodsList = res.data;
        // 只是拿传过来的id,在数组中找到相同id的数据，渲染到页面
        for (let i = 0; i < _this.goodsList.length; i++) {
          if(_this.goodsList[i].id == id) {
            _this.goodsObj = _this.goodsList[i];
          }
        }
      } else if (res.code == 404) {
        _this.$MessageAlert(true, _this.$t("share.Message.error"), "error");
      }
    });
    
  }
}
</script>

<style lang="less" scoped>
// 布局容器
.el-header {
  font-size: 0;
}
.el-header, .el-footer {
  color: #333;
  text-align: center;
  height: auto!important;
  padding: 0px;
}
.el-main {
  // width: 1150px;
  color: #333;    
  padding: 0px;
  // 计算减去头部和底部的高度，就是中间的高度
  min-height: calc(100vh - 61px - 220px)
}
.el-aside {
    color: #333;
    text-align: center;
}
// 布局容器结束\
#integralGoods {
  min-width: 1190px;
}
.main_frame {
  width: 1150px;
  // border: 1px solid blue;
  margin: auto;
  margin-top: 50px;

  .goodsTop {
    // 父盒子
    // min-width: 1190px;
    // border: 1px solid red;
    display: flex;
    justify-content: flex-start;

    .goodsImg {
      width: 45%;
      height: 226px;
      border-radius: 2px;
      img{
        width: 100%;
        height:100%;
      }
      // 图片
      // border: 1px solid blueviolet;
    }
    .productDescription {
      width: calc(55% - 60px);
      margin-left: 60px;
      font-size: 15px;
      // 文字
      // border: 1px solid yellow;
      h3 {
        margin: 0px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      p {
        color: #777;
        font-size: 14px;
        margin: 20px 0px 2px 0px;
      }
      span {
        color: #777;
        font-size: 14px;
      }
      .price {
        margin-top: 25px;
        font-size: 18px;
        color: #F24749;
        .integral {
          font-size: 22px;
          color: #F24749;
        }
        .money {
          font-size: 22px;
          color: #F24749;
        }
      }
      .exchangeButton {
        margin-top: 40px;
        button {
          color: white;
          padding: 9px 30px;
          background-color: #F24749;
          // border: 1px solid red;
        }
      }
    }
  }
  .goodsBottom {
    margin-top: 60px;
    margin-bottom: 80px;
    border:1px solid #ccc;
    .bar {
      // margin: 10px;
      display: inline-block;
      // border: 1px solid #ccc;
      span {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        display: inline-block;
        padding: 10px 25px;
        cursor: pointer;
      }
      // span:first-child {
      //   border-right: 0px;
      // }
      .spanBorder {
        border-bottom: 1px solid red;
      }
    }
    .details {
      padding: 20px;
    }
    .record {
      padding: 20px 40px;
      ul {
        li {
          margin: 15px 0px;
          padding: 3px 0px;
          span {
            float: right;
            margin-right: 30px;
          }
        }
      }
      .headPortrait {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        margin-right: 25px;
        border: 1px solid red;
        img {
          height: 100%;
          width: 100%;
        }
        
      }
    }
    
  }
}
</style>